<template>
	<gui-page :isLoading="pageLoading" ref="guiPage">
		<view slot="gBody" class="gui-flex1 gui-flex gui-columns gui-bg-gray ">
			
			<gui-empty v-if="info.length<=0" style='padding-bottom: 200rpx;'>
				<view slot="img" class="gui-flex gui-rows gui-justify-content-center">
					<image class="gui-empty-img" 
					src="https://upload-images.jianshu.io/upload_images/15372054-1f849183cebb80b1.png?imageMogr2/auto-orient/strip|imageView2/2/w/388/format/webp"></image>
				</view>
				<text slot="text" 
				class="gui-text-small gui-block-text gui-text-center gui-margin-top" style="color:#9DABFF;">暂无数据 ......</text>
			</gui-empty>
			
			<view v-for="(item,index) in info" :key='item.id'>
				<view v-if='item.imgs.length<=0' class="gui-padding gui-bg-white z-commu gui-border-radius">
					<view  class="gui-bg-white  gui-border-radius" @tap="detail(item.id)">
						<view class="gui-flex">
							<view class="z-commu-txt4">
								<view class="t-text">{{item.title}}</view>
								<view class="gui-flex z-com">
									<view class="z-com-name gui-flex">
										<view class="z-yuan">{{item.author}}</view>
										<view class="z-ping">{{item.ping}} 评论</view>
										<view class="gui-text-small gui-color-gray">{{item.time}}</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				
				<view v-if='item.imgs.length==1'>
					<view v-if='item.sui>0.5' class="gui-padding gui-bg-white z-commu gui-border-radius">
					
					
						<view  class=" gui-bg-white  gui-border-radius" @tap="detail(item.id)">
							<view class="gui-flex">
								<view class="z-commu-txt2" >
									<view class="t-text">{{item.title}}</view>
									<view class="gui-flex z-com">
										<view class="z-com-name gui-flex gui-flex1">
											<view class="z-yuan">{{item.author}}</view>
											<view class="z-ping">{{item.ping}} 评论</view>
											<view class="gui-text-small gui-color-gray">{{item.time}}</view>
										</view>
									</view>
								</view>
								<view class="z-commu-img2" @tap="detail">
									<image :src="imgServer+item.imgs[0]" mode="widthFix" style="width: 100%; overflow: hidden; margin-right: 10rpx;"></image>
								</view>
							</view>
						</view>
					</view>
					
					
					<view v-else class="gui-padding gui-bg-white z-commu gui-border-radius" @tap="detail(item.id)">
						<view class="z-commu-txt"><view class="t-text">{{item.title}}</view></view>
						<view class="z-commu-img gui-flex">
							<image  :src="imgServer+item.imgs[0]" mode="widthFix" style="width: 100%;overflow: hidden; margin-right: 10rpx;"></image>
						</view>
						<view class="gui-flex gui-justify-content-start t-con">
							<view class="z-yuan">{{item.author}}</view>
							<view class="z-ping">{{item.ping}} 评论</view>
							<view class="gui-text-small gui-color-gray">{{item.time}}</view>
						</view>
					</view>
					
				</view>
				<view  v-if='item.imgs.length==2' class="gui-padding gui-bg-white z-commu gui-border-radius" @tap="detail(item.id)">
					<view class="z-commu-txt"><view class="t-text">{{item.title}}</view></view>
					<view class="z-commu-img gui-flex">
						<image :src="imgServer+item.imgs[0]" mode="widthFix" style="width: 100%;overflow: hidden; margin-right: 10rpx;"></image>
						<image :src="imgServer+item.imgs[1]" mode="widthFix" style="width: 100%;overflow: hidden;"></image>
					</view>
					<view class="gui-flex gui-justify-content-start t-con">
						<view class="z-yuan">{{item.author}}</view>
						<view class="z-ping">{{item.ping}} 评论</view>
						<view class="gui-text-small gui-color-gray">{{item.time}}</view>
					</view>
				</view>
				
				<view  v-if='item.imgs.length>2' class="gui-padding gui-bg-white z-commu gui-border-radius" @tap="detail(item.id)">
					<view class="z-commu-txt"><view class="t-text">{{item.title}}</view></view>
					<view class="z-commu-img5 gui-flex">
						<image :src="imgServer+item.imgs[0]" mode="widthFix" style="width: 100%;overflow: hidden; margin-right: 10rpx;"></image>
						<image :src="imgServer+item.imgs[1]" mode="widthFix" style="width: 100%;overflow: hidden; margin-right: 10rpx;"></image>
						<image :src="imgServer+item.imgs[2]" mode="widthFix" style="width: 100%;overflow: hidden;"></image>
					</view>
					<view class="gui-flex gui-justify-content-start t-con">
						<view class="z-yuan">{{item.author}}</view>
						<view class="z-ping">{{item.ping}} 评论</view>
						<view class="gui-text-small gui-color-gray">{{item.time}}</view>
					</view>
				</view>
			</view>
			<view style="height: 20rpx;"></view>
		</view>
	</gui-page>
</template>
<script>

export default {
	data() {
		return {
			imgServer:'',
			pageLoading: true,
			page:1,
			info:[]
		};
	},
	onLoad: function(e) {
		this.imgServer=uni.common.imgServer
		if (e.yaoqing) {
			uni.setStorageSync('yaoqing', e.yaoqing);
		}
	},
	onShow() {
		this.page=1
		this.get_data()
	},
	onShareAppMessage(res) {
	    if (res.from === 'button') {// 来自页面内分享按钮
	      console.log(res.target)
	    }
		const user_no = uni.getStorageSync('user_no');
	    return {
	      title: '商城欢迎您！',
	      path: '/pages/arc/index?yaoqing=' + user_no
	    }
	  },
	onReachBottom(){
		this.get_data()
	},
	methods: {
		get_data(){
			uni.common.post(
				uni.common.apiServer + 'index',
				{
					type: 'get_arc_list',
					page:this.page
				},
				false,
				res => {
					this.pageLoading = false;
					if (res.code == 1) {
						let list=res.data
						for (let i in list) {
							list[i].sui=Math.random()
							list[i].time=uni.common.to_time(list[i].time,2)
							if(!list[i].author){
								list[i].author='未知'
							}
						}
						if(this.page==1){
							this.info=list
						}else{
							this.info = this.info.concat(list);
						}
						this.page++
					} else {
						uni.showToast({
							icon: 'none',
							title: '已经加载全部'
						});
					}
				},
				e => {
					console.log(e);
				}
			);
		},
		detail: function(id) {
			uni.navigateTo({
				url: 'show?id='+id
			});
		},
		
	}
};
</script>
<style>
.t-con {
	height: 30rpx;
	line-height: 30rpx;
	margin-top: 20rpx;
}

.t-text {
	font-size: 32rpx;
	min-height: 45rpx;
	max-height: 90rpx;
	line-height: 45rpx;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

.z-yuan {
	font-size: 24rpx;
	color: rgba(69, 90, 100, 0.6) !important;
}

.z-ping {
	font-size: 24rpx;
	color: rgba(69, 90, 100, 0.6) !important;
	margin-left: 10rpx;
	margin-right: 10rpx;
}

.gui-text-small {
	float: right;
	font-size: 24rpx;
}

.demo-nav {
	padding: 15rpx 30rpx;
}

.demo-text {
	line-height: 200rpx;
	padding-bottom: 3000px;
}

.search-warp {
	width: 750rpx;
	padding: 15rpx 20rpx;
}

.z-commu {
	padding-top: 20rpx;
	padding-bottom: 15rpx;
	margin-top: 20rpx;
}

.z-com {
	padding-top: 40rpx;
}

.z-com-img {
	width: 70rpx;
	height: 0rpx;
	border-radius: 50%;
	overflow: hidden;
	margin-right: 30rpx;
}

.z-com-name {
	width: 400rpx;
	line-height: 40rpx;
	height: 40rpx;
}

.z-com-focus {
	padding-top: 12rpx;
}

.z-focus {
	padding: 5rpx 15rpx;
	border-radius: 30rpx;
	border: 1px solid #008aff;
	color: #008aff;
	line-height: 45rpx;
	font-size: 26rpx;
}

.z-focus-name {
	margin-left: 10rpx;
}

.z-focus1 {
	padding: 5rpx 15rpx;
	border-radius: 30rpx;
	border: 1px solid #babbbc;
	color: #babbbc;
	line-height: 45rpx;
	font-size: 26rpx;
}

.z-focus-name1 {
	margin-left: 10rpx;
}

.z-commu-txt {
	margin-bottom: 30rpx;
	width: 600rpx;
}

.z-commu-txt1 {
	margin-bottom: 15rpx;
	height: 60rpx;
	line-height: 30rpx;
	word-break: break-all;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

.z-commu-img {
	width: 100%;
	height: 225rpx;
	overflow: hidden;
}

.z-fun {
	margin-top: 15rpx;
	padding-top: 15rpx;
}

.z-with {
	width: 210rpx;
	margin: 0 auto;
}

.z-tb {
	margin-top: 15rpx;
}

.z-tb-title {
	margin-left: 10rpx;
	font-size: 28rpx;
	line-height: 45rpx;
}

.pendant {
	width: 88rpx;
	height: 88rpx;
	border-radius: 88rpx;
	text-align: center;
	line-height: 88rpx;
	font-size: 55rpx;
}
.z-commu-txt2{
	width: 450rpx;
	margin-right: 30rpx;
}
.z-commu-img2{
	width: 240rpx;
	height: 160rpx;
	overflow: hidden;
}
.z-commu-txt4{
	width: 100%;
}
.z-commu-img5{
	width: 100%;
	height: 120rpx;
	overflow: hidden;
}
</style>
